<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    align-center
  >
    <div class="confirm-content">
      <div class="confirm-icon">
        <el-icon :size="48" :color="iconColor">
          <component :is="iconComponent" />
        </el-icon>
      </div>
      <div class="confirm-message">
        <div class="message-title">{{ message }}</div>
        <div v-if="description" class="message-description">{{ description }}</div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel" :disabled="loading">
          {{ cancelText }}
        </el-button>
        <el-button 
          :type="confirmType" 
          @click="handleConfirm" 
          :loading="loading"
        >
          {{ confirmText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  Warning, 
  QuestionFilled, 
  InfoFilled, 
  SuccessFilled,
  CircleCloseFilled
} from '@element-plus/icons-vue'

interface Props {
  visible: boolean
  title?: string
  message: string
  description?: string
  type?: 'warning' | 'info' | 'success' | 'error' | 'question'
  confirmText?: string
  cancelText?: string
  confirmType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
  width?: string
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '确认操作',
  description: '',
  type: 'warning',
  confirmText: '确定',
  cancelText: '取消',
  confirmType: 'primary',
  width: '420px',
  loading: false
})

const emit = defineEmits<{
  'update:visible': [value: boolean]
  confirm: []
  cancel: []
}>()

// 计算属性
const iconComponent = computed(() => {
  const iconMap = {
    'warning': Warning,
    'question': QuestionFilled,
    'info': InfoFilled,
    'success': SuccessFilled,
    'error': CircleCloseFilled
  }
  return iconMap[props.type] || Warning
})

const iconColor = computed(() => {
  const colorMap = {
    'warning': '#E6A23C',
    'question': '#409EFF',
    'info': '#909399',
    'success': '#67C23A',
    'error': '#F56C6C'
  }
  return colorMap[props.type] || '#E6A23C'
})

// 方法
const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  emit('update:visible', false)
  emit('cancel')
}
</script>

<style lang="scss" scoped>
.confirm-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  
  .confirm-icon {
    flex-shrink: 0;
  }
  
  .confirm-message {
    flex: 1;
    
    .message-title {
      font-size: 16px;
      color: var(--text-color-primary);
      line-height: 1.5;
      margin-bottom: 8px;
    }
    
    .message-description {
      font-size: 14px;
      color: var(--text-color-secondary);
      line-height: 1.6;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
